<template>
  <div>
    <el-card>
      <div>
        <el-tree :props="defaultProps"
          :data="tableData"
          default-expand-all>
          <div slot-scope="{ node, data }"
            :class="$style.treeItem">
            <div>{{ data.label }}</div>
            <div space></div>
          </div>
        </el-tree>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultProps: { children: 'children', label: 'label' },
      tableData: [
        {
          label: '超级会员',
          type: 'root',
          children: [
            {
              label: '红色会员'
            },
            {
              label: '黄色会员'
            }
          ]
        },
        {
          label: '年会会员',
          type: 'root',
          children: [
            {
              label: '月度会员'
            },
            {
              label: '季度会员'
            }
            ,
            {
              label: '年度会员'
            }
          ]
        }
      ]
    }
  },

}
</script>

<style lang="scss" module>
.treeItem {
  flex-grow: 1;
  display: flex;
  align-items: center;

  [space] {
    flex-grow: 1;
  }
}
</style>
